<template>
	<view>
		<view class="charts-box" >
			<qiun-data-charts 
			  type="line"
			  :opts="opts"
			  :chartData="chartData"
			  />
		</view>
		  
		<view class="charts-box">
		  <qiun-data-charts 
			type="area"
			:opts="opts2"
			:chartData="chartData2"
		  />
		</view>
	</view>
</template>

<script>
	import qiunDataCharts from '../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
	  mixins: [qiunDataCharts],
	  data() {
	    return {
	      chartData: {},
	      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
	      opts: {
	        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        padding: [15,10,0,15],
	        dataLabel: false,
	        dataPointShape: false,
	        enableScroll: false,
	        
	        xAxis: {
	          disableGrid: true,
			  fontColor: "#ffffff",
			 
	        },
	        yAxis: {
			  gridColor: "#1f2d3c",
	          gridType: "solid",
	          dashLength: 2,
	          data: [
	            {
	              min: 0,
	              max: 150,
				  fontColor: "#ffffff",
				  
	            }
	          ]
	        },
			legend:{
				show:true,
				fontColor:"#ffffff",
			},
	        extra: {
	          line: {
	            type: "curve",
	            width: 2,
	            activeType: "hollow",
	            linearType: "custom",
	            onShadow: true,
	            animation: "horizontal",
			
	          },
			 
			  
	        }
	      },
		  
		    //---2
		    chartData2: {},
		        //您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		    opts2: {
		          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		          padding: [15,15,0,15],
		          enableScroll: false,
		          legend:{
		          	show:true,
		          	fontColor:"#ffffff"
		          },
				  
		          xAxis: {
		            disableGrid: true,
					 fontColor: "#ffffff",
		          },
		          yAxis: {
		            gridType: "solid",
					gridColor: "#1f2d3c",
					data: [
					  {
					    min: 0,
					    max: 150,
						fontColor: "#ffffff",
									  
					  }
					]
		          },
		          extra: {
		            area: {
		              type: "curve",
		              opacity: 0.2,
		              addLine: true,
		              width: 2,
		              gradient: true,
		              activeType: "hollow",
					 
		            }
		          },
		  }
	    };
	  },
	  onReady() {
	    this.getServerData();
	  },
	  methods: {
	    getServerData() {
	      //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	        let res = {
	            categories: ["2018","2019","2020","2021","2022","2023","2024"],
	            series: [
	              {
	                name: "稼动率",
	                linearColor: [
	                  [
	                    0,
	                    "#1890FF"
	                  ],
	                  [
	                    0.25,
	                    "#00B5FF"
	                  ],
	                  [
	                    0.5,
	                    "#00D1ED"
	                  ],
	                  [
	                    0.75,
	                    "#00E6BB"
	                  ],
	                  [
	                    1,
	                    "#90F489"
	                  ],
					  [
					    1,
					    "#90F489"
					  ]
	                ],
	                setShadow: [
	                  3,
	                  8,
	                  10,
	                  "#1890FF"
	                ],
	                data: [15,45,15,45,15,45,90]
	              },	             
	              
	            ]
	          };
	        this.chartData = JSON.parse(JSON.stringify(res));
			//----2
			let res2 = {
			            categories: ["2018","2019","2020","2021","2022","2023"],
			            series: [
			              {
			                name: "稼动率",
			                data: [35,8,25,37,4,90],
							textColor:"#ffffff"
			              },
			              
			            ]
			          };
			this.chartData2 = JSON.parse(JSON.stringify(res2));
			
	      }, 500);
	    },
	  }
	};
</script>

<style>
	.charts-box {
	    width: 100%;
	    height: 300px;
		background-color: rgb(2, 18, 51);
	  }
</style>
